<!-- 框选查询 -->
<script setup>
import { toRefs, ref, watch } from 'vue';
import { CloseBold } from '@element-plus/icons-vue';
import { ElButton, ElIcon, ElTable, ElTableColumn } from 'element-plus';
import { exportExcel } from '@/common/common-helper';

const props = defineProps({
  resultFeatures: Object,
  polygonShow: Boolean,
});
const { resultFeatures, polygonShow } = toRefs(props);
const emit = defineEmits(['CloseQueryResultShow']);
const columns = ref([]);
const dataSource = ref([]);

watch(
  resultFeatures,
  (val) => {
    columns.value = val.features?.[0]?.properties.tableLabel;

    dataSource.value = val?.features?.map((item) => ({
      ...item.properties.table,
    }));
  },
  { deep: true },
);

const handleCloseModule = () => {
  emit('CloseQueryResultShow');
};

const exportDataEvent = async () => {
  let columnsVal = [];

  columns.value.map((item) => {
    const info = {};

    info['title'] = item;
    info['dataIndex'] = item;

    columnsVal.push(info);
  });

  await exportExcel(columnsVal, [], dataSource.value, '属性查询');
};
</script>
<template>
  <div v-if="polygonShow" class="att_point1_root">
    <header>
      <span class="title">框选查询 (共{{ dataSource.length || 0 }}个要素)</span>

      <div class="right_header">
        <ElButton type="primary" @click="exportDataEvent">导出表格数据</ElButton>

        <ElIcon class="root_icon_close" @click="handleCloseModule">
          <CloseBold />
        </ElIcon>
      </div>
    </header>

    <main>
      <div class="main_table">
        <ElTable
          :data="dataSource"
          :header-cell-style="{
            color: '#FFFFFF',
            background: '#FFFFFF',
          }"
          class="table_border"
        >
          <ElTableColumn
            v-for="(item, index) in columns"
            :key="index"
            :prop="item"
            :label="item"
            align="center"
            show-overflow-tooltip
          >
            <template #default="scope">
              <div class="content_style img_style" :title="scope.row[item]">{{ scope.row[item] }}</div>
            </template>
          </ElTableColumn>
        </ElTable>
      </div>
    </main>
  </div>
</template>

<style scoped lang="scss">
.att_point1_root {
  position: fixed;
  right: 5px;
  bottom: 1px;
  left: 5px;
  z-index: 9999;
  height: 286px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  box-shadow: 0px 0px 0.9px rgba(0, 0, 0, 0.02), 0px 0px 2.1px rgba(0, 0, 0, 0.028), 0px 0px 3.9px rgba(0, 0, 0, 0.035),
    0px 0px 6.9px rgba(0, 0, 0, 0.042), 0px 0px 13px rgba(0, 0, 0, 0.05), 0px 0px 31px rgba(0, 0, 0, 0.07);
  transition: bottom 1.5s;

  header {
    display: flex;
    justify-content: space-between;
    height: 47px;
    padding: 10px 16px;
    color: #ffffff;
    border-bottom: 1px solid rgba(232, 231, 229, 0.5);
    .title {
      font-weight: 600;
      font-size: 18px;
      letter-spacing: 1px;
    }

    .right_header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .root_icon_close {
      width: 29px;
      height: 29px;
      margin-left: 20px;
      color: #ffffff;
      font-size: 20px;
      cursor: pointer;
      :hover {
        color: #387dfb;
      }
    }
  }

  main {
    .main_table {
      .table_border {
        width: 100%;
        height: 250px;
        border-radius: 4px;
      }
      :deep(.el-table) {
        --el-table-row-hover-bg-color: none;
        background: rgba(0, 0, 0, 0.1) !important;
      }
      :deep(.el-table__empty-text) {
        color: #ffffff !important;
      }

      :deep(.el-table th.el-table__cell) {
        background: rgba(0, 0, 0, 0.1) !important;
      }
      :deep(.el-table tr) {
        color: #fff;
        font-size: 16px;
        background: rgba(0, 0, 0, 0.1) !important;
      }
      :deep(.el-table__header tr) {
        background: rgba(192, 191, 191, 0.2) !important;
      }
    }
  }
}
</style>
